import { defineComponent, reactive, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import {
  ElDialog,
  ElButton,
  ElIcon,
  ElMessage,
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElInput,
  ElSelect,
  ElOption,
  ElSwitch,
  ElLink
} from 'element-plus'
import { EditPen, Plus } from '@element-plus/icons-vue'
import type { EventSetPropsType } from './typings'
import AliIcon from '~/components/AliIocn'
import styles from './index.module.scss'

export default defineComponent({
  name: 'ConnectSet',
  props: ['visible', 'record'],
  emits: ['cancel'],
  setup(props: EventSetPropsType, { emit }) {
    const store = useStore()
    const router = useRouter()
    const state = reactive<any>({
      tabsName: 1,
      params: null,
      sensorTypeOpt: [
        { name: '门磁', value: '1' },
        { name: '转换开关', value: '2' }
      ],
      interfaceTypeOpt: [{ name: 'DI', value: '1' }],
      diTypeChanOpt: [
        { name: 'DI1', value: '1' },
        { name: 'DI2', value: '2' },
        { name: 'DI3', value: '3' },
        { name: 'DI4', value: '4' },
        { name: 'DI5', value: '5' },
        { name: 'DI6', value: '6' },
        { name: 'DI7', value: '7' },
        { name: 'DI8', value: '8' },
        { name: 'DI9', value: '9' },
        { name: 'DI10', value: '10' },
        { name: 'DI11', value: '11' },
        { name: 'DI12', value: '12' },
        { name: 'DI13', value: '13' },
        { name: 'DI14', value: '14' },
        { name: 'DI15', value: '15' },
        { name: 'DI16', value: '16' }
      ],
      triggerStateOpt: [
        { name: '低电平', value: '0' },
        { name: '高电平', value: '1' }
      ],
      typeOpt: [
        { name: '进线电缆', value: 2 },
        { name: '进线有功功率', value: 3 }
      ]
    })
    // 关闭弹框事件回调
    const handleCloseModal = () => {
      emit('cancel')
    }

    // 提交表单
    const handleSubmitForm = async () => {
      const { id } = router.currentRoute.value.query
      state.params.id = id
      const res = await store.dispatch('equipment/UpdateOtherPut', state.params)
      if (res?.code === 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        handleCloseModal()
      }
    }
    //  删除
    const del = (row: any) => {
      state.params.otherData = state.params.otherData.filter(
        (item: any, index: number) => row.$index !== index
      )
    }
    //  新增
    const add = () => {
      state.params.otherData.push({
        name: '',
        sensorType: '1',
        interfaceType: '1',
        diTypeChan: null,
        triggerState: null
      })
    }

    onMounted(() => {
      state.params = props.record
    })

    return () => {
      const { visible } = props
      return (
        <ElDialog
          title="其它参数"
          modelValue={visible}
          closeOnClickModal={false} // 点遮罩层不关弹窗
          draggable // 可拖拽
          beforeClose={handleCloseModal}
          v-slots={{
            footer: () => (
              <>
                <ElButton type="primary" onClick={handleSubmitForm}>
                  <ElIcon>
                    <EditPen />
                  </ElIcon>
                  &nbsp; 确定
                </ElButton>
                <ElButton onClick={handleCloseModal}>取消</ElButton>
              </>
            )
          }}
        >
          <ElTabs v-model={state.tabsName}>
            <ElTabPane label="传感器参数" name={1}>
              <div style="margin-bottom: 20px;">
                <ElButton type="primary" onClick={add}>
                  <ElIcon>
                    <Plus />
                  </ElIcon>
                  &nbsp; 新增
                </ElButton>
              </div>
              <ElTable data={state.params?.otherData} border height={500}>
                <ElTableColumn
                  prop="name"
                  label="传感器名称"
                  v-slots={{
                    default: (scope: any) => <ElInput v-model={scope.row.name} />
                  }}
                />
                <ElTableColumn
                  prop="sensorType"
                  label="传感器类型"
                  v-slots={{
                    default: (scope: any) => (
                      <ElSelect v-model={scope.row.sensorType}>
                        {state.sensorTypeOpt?.map((item: any) => (
                          <ElOption key={item?.value} label={item?.name} value={item?.value} />
                        ))}
                      </ElSelect>
                    )
                  }}
                />
                <ElTableColumn
                  prop="interfaceType"
                  label="检验接口类型"
                  width="120"
                  v-slots={{
                    default: (scope: any) => (
                      <ElSelect v-model={scope.row.interfaceType} disabled>
                        {state.interfaceTypeOpt?.map((item: any) => (
                          <ElOption key={item?.value} label={item?.name} value={item?.value} />
                        ))}
                      </ElSelect>
                    )
                  }}
                />
                <ElTableColumn
                  prop="diTypeChan"
                  label="关联接口号"
                  v-slots={{
                    default: (scope: any) => (
                      <ElSelect v-model={scope.row.diTypeChan}>
                        {state.diTypeChanOpt?.map((item: any) => (
                          <ElOption key={item?.value} label={item?.name} value={item?.value} />
                        ))}
                      </ElSelect>
                    )
                  }}
                />
                <ElTableColumn
                  prop="triggerState"
                  label="触发状态"
                  v-slots={{
                    default: (scope: any) => (
                      <ElSelect v-model={scope.row.triggerState}>
                        {state.triggerStateOpt?.map((item: any) => (
                          <ElOption key={item?.value} label={item?.name} value={item?.value} />
                        ))}
                      </ElSelect>
                    )
                  }}
                />
                <ElTableColumn
                  label="操作"
                  v-slots={{
                    default: (scope: any) => (
                      <ElLink type="primary" onClick={() => del(scope)}>
                        <AliIcon type="icon-shanchu" />
                        &nbsp; 删除
                      </ElLink>
                    )
                  }}
                />
              </ElTable>
            </ElTabPane>
            <ElTabPane label="进线参数" name={2}>
              <table class={styles['table-form']} cellspacing={0} cellpadding={0}>
                <tr>
                  <td>名称</td>
                  <td style="width: 150px;">类型</td>
                  <td>是否启用</td>
                  <td style="width: 150px;">变比</td>
                </tr>
                <tr>
                  <td>{state.params.energyData.name}</td>
                  <td>
                    <ElSelect v-model={state.params.energyData.type}>
                      {state.typeOpt?.map((item: any) => (
                        <ElOption key={item?.value} label={item?.name} value={item?.value} />
                      ))}
                    </ElSelect>
                  </td>
                  <td>
                    <ElSwitch
                      v-model={state.params.energyData.enable}
                      active-value={true}
                      inactive-value={false}
                    />
                  </td>
                  <td>
                    <ElInput v-model={state.params.energyData.energyCurrent} />
                  </td>
                </tr>
              </table>
            </ElTabPane>
          </ElTabs>
        </ElDialog>
      )
    }
  }
})
